import moment from 'moment';
import { DatePicker } from 'antd';
import React, { useState } from 'react';
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
import { useDeepCompareEffect } from 'ahooks';
import styles from './index.less';

const { RangePicker } = DatePicker;

type TProps = {
  value?: any;
  // width?: string;
  // format?: string;
  onChange: TAnyFunction;
  style?: any;
};
type TimeType = 'seven' | 'thirty' | '';
type RangePickerValue = RangePickerProps<moment.Moment>['value'];

const CommonSelectDate: React.FC<TProps> = (props) => {
  const { value, onChange, style = { width: 256, marginRight: 24 } } = props;
  const [selectTimeLabel, setSelectTimeLabel] = useState<TimeType>('seven'); // 当前选中时间标签
  const [selectTime, setSelectTime] = useState<RangePickerValue | Array<any>>([]); // 当前选中时间
  const [hackValue, setHackValue] = useState<any>(null);
  const [dates, setDates] = useState<any>(null);

  useDeepCompareEffect(() => {
    if (value) {
      setSelectTime(value);
    }
  }, [value]);

  // 是否选中
  const isActive = (val: TimeType) => {
    if (val === selectTimeLabel) {
      return styles.currentDate;
    }
    return '';
  };

  // 选择日期标签
  const selectDate = (val: TimeType) => {
    if (val !== selectTimeLabel) {
      if (val === 'seven') {
        const list: any = [moment().subtract(7, 'days'), moment().subtract(1, 'days')];
        setSelectTime(list);
        onChange(list);
      } else {
        const list: any = [moment().subtract(30, 'days'), moment().subtract(1, 'days')];
        setSelectTime(list);
        onChange(list);
      }
      setSelectTimeLabel(val);
    }
  };

  // 选择日期
  const handleRangePickerChange = (val: RangePickerValue) => {
    setSelectTime(val);
    setSelectTimeLabel('');
    onChange(val);
  };
  //限制当天之前的日期不可选
  const disabledDate = (current: any) => {
    if (!dates) {
      return false;
    }

    // 限制时间范围为 30天
    if (dates[0] && current.diff(dates[0], 'days') >= 30) {
      return true;
    }
    if (dates[1] && current.diff(dates[1], 'days') <= -30) {
      return true;
    }
    // 当天之后的不可选，包括当天
    return current && current >= moment().subtract(1, 'days');
  };

  const onOpenChange = (open: any) => {
    if (open) {
      setHackValue([null, null]);
      setDates([null, null]);
    } else {
      setHackValue(null);
    }
  };

  const onCalendarChange = (dates: any) => {
    setDates(dates);
  };

  // console.log('公共时间选择', selectTime, selectTimeLabel);

  return (
    <div className={styles.commonDate}>
      <div style={{ display: 'flex' }}>
        <div className={styles.salesExtra}>
          <div className={isActive('seven')} onClick={() => selectDate('seven')}>
            7日
          </div>
          <div className={isActive('thirty')} onClick={() => selectDate('thirty')}>
            30日
          </div>
        </div>
        <RangePicker
          value={hackValue || selectTime}
          onChange={handleRangePickerChange}
          style={style}
          disabledDate={disabledDate}
          onCalendarChange={onCalendarChange}
          onOpenChange={onOpenChange}
        />
      </div>
    </div>
  );
};

export default CommonSelectDate;
